<template>
  <div class="top-print-box">
    <div class="print-item">
      <span>合同编号：</span>
      <el-input v-model="contractNo"
                placeholder="请输入合同编号"
                size="medium"
                style="width:460px;" />
      <el-button type="primary"
                 plain
                 :loading="loading"
                 @click="submit">打印</el-button>
    </div>
    <TopOEMPrint v-if="orderTypeName === 'OEM直发'"
                 :print-params="printParams" />
    <TopUnOEMPrint v-if="['干线直发', '经销商直发'].includes(orderTypeName)"
                   :print-params="printParams" />
  </div>
</template>

<script>

import TopOEMPrint from "../TopOEMPrint.vue";
import TopUnOEMPrint from "../TopUnOEMPrint.vue";
import { transport } from '@/api/index'
import _ from 'lodash'
export default {
  name: 'TopPrint',
  components: {
    TopOEMPrint,
    TopUnOEMPrint
  },
  data () {
    return {
      loading: false,
      contractNo: null,
      waybillId: null,
      orderTypeName: null,
      printParams: {}
    }
  },
  computed: {
    params () {
      return {
        contractNos: [this.contractNo, this.contractNo],
        page: 1,
        size: 10,
        waybillType: 10,
        status: [30, 40, 50], //待签收、待回单、已回单
      }
    }
  },
  created () { },
  methods: {
    // 合同编号查询运单
    async getWaybillAction () {
      this.loading = true;
      this.orderTypeName = null
      let { data } = await transport.search(this.params).catch(err => {
        this.loading = false;
      })
      if (data.records.length) {
        this.getWaybillById(data.records[0].waybillId)
      } else {
        this.loading = false;
        this.$message({ message: "数据不存在", type: "warning" });
      }
    },
    // 获取运单详情
    async getWaybillById (waybillId) {
      let { data } = await transport.getDetail(waybillId).catch(err => {
        this.loading = false;
      })
      this.loading = false;
      if (data?.echo) {
        this.orderTypeName = data.echo?.orderTypeName;
        this.printParams = {
          waybillId,
          orderId: data.orderId
        }
      }
    },
    // 触发事件
    submit: _.debounce(function () {    // 触发事件
      if (this.contractNo) {
        this.getWaybillAction();
      } else {
        this.$message.warning("请输入合同编号！");
      }
    }, 600),
  }
}
</script>
<style lang="scss" scoped>
.top-print-box {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.print-item {
  padding-top: 15%;
}

.content {
  background: var(--prev-bg-white);
  padding: 20px;
  position: relative;
  height: 88vh;
}
.rowSty {
  display: flex;
  justify-content: center;
  padding-top: 20vh;
}
</style>
